<template>
    <div class="ui-header">
      <slot name="header">
          <div class="header-logo clearfix">
              <div class="title">
                <h1>OTP v1.0</h1>
              </div>
          </div>
          <div class="header-bar">
              <ul class="bar-list">
                <li><a href="/logout"><img src="../assets/imgs/close.png" /></a></li>
              </ul>
          </div>
      </slot>
    </div>
</template>
<style lang="less" scoped>
  @white:#fff;
  @headerBgColor: #464E78;
  .ui-header{
    position: fixed;
    top:0;
    left:0;
    height: 84px;
    width: 100%;
    border-bottom:2px solid #4D7AB6;
    background: @headerBgColor;
    overflow: auto;
    z-index: 1000;
  }
  .header-logo{
      float: left;
      padding: 12px 0 0 30px;
     a {
       float: left;
       margin-right:20px;
     }
    .title{
      color:@white;
      overflow: hidden;
      float: left;
      h1 {
        font-size:18px;
        margin-top: 8px;
      }
      p{
        margin-top:5px;
        font-size:12px;
      }
    }
  }
  .header-bar{
    float: right;
    li{
      display: inline-block;
      padding:0 25px;
      line-height:82px;
      color:@white;
      .userName {
        color:@white;
      }
      span{
        margin-left:10px ;
      }
      img{
        vertical-align: middle ;
      }
      &:last-child{
        border-left: 1px solid #202832;
      }
    }
  }
</style>
<script>
    import {mapActions} from 'vuex'
    export default{
        data(){
            return{
            }
        }
    }
</script>
